<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script crossorigin="anonymous" src="https://lib.baomitu.com/echarts/5.1.2/echarts.js"></script>
    <script src="./map/js/province/beijing.js"></script>
</head>

<body>
    <div class="wrap" style="position: relative;">
        <div id="map" style="width: 100%; height: 700px;"></div>
    </div>
</body>
<script>
    var myChart = echarts.init(document.getElementById('map'));
    var mapData=[{ name: '延庆区', value: 22 },
                { name: '海淀区', value: 1 },
                { name: '密云区', value: 300 }]
    var option;
    option = {
        backgroundColor: "#404a59",
        tooltip: {
          trigger: "item",
          backgroundColor: "#0E3A46", //设置背景色
          borderColor: "#0E3A46", //设置边框颜色
          textStyle: {
            color: "#ccc",
          },
        },
        visualMap: [
            {
                type: "piecewise",
                show: true,
                min: 1,
                pieces: [
                    { min: 200 },
                    { min: 40, max: 199 },
                    { min: 10, max: 39 },
                    { min: 2, max: 9 },
                    { value: 1 },
                ],
                inRange: {
                    color: [
                        "#24BECBe6",
                        "#0BB6E9e6",
                        "#025A98e6",
                        "#025A98e6",
                        "#0268ECe6",
                    ],
                },
                outOfRange: {
                    //定义 在选中范围外 的视觉元素。
                    color: ["#44ffab33"],
                },
                itemWidth: 13,
                itemHeight: 13,
                itemGap: 8,
                textGap: 5,
                itemSymbol: "circle",
                seriesIndex: 0,
                // dimension:0,
                textStyle: {
                    color: "#fff",
                    fontSize: 13,
                    // lineHeight:20
                },
            },
        ],
        geo: {
            name: "数据分布",
            type: "map",
            map: "北京",
            itemStyle: {
                areaColor: "#44ffab66",
                borderColor: "#45FFAD",
            },
            roam: true, //是否可以缩放
            zoom: 1.25,
            emphasis: {
                label: {
                    show: false,
                    color: "#fff",
                },
                itemStyle: {
                    areaColor: "#d3fdfc",
                    borderColor: "#0394d9",
                },
            },
            label: {
                normal: {
                    show: true, //初始地图是否显示省
                    color: "#fff",
                },
            },
          tooltip: {
            // trigger: 'item',
            backgroundColor: "transparent",
            borderColor: "transparent", //设置边框颜色
            borderRadius: 15,
            textStyle: {
              color: "#fff",
            },
            padding: 0,
            formatter: function (params) {
              // console.log(params)
              let it = mapData.find((v) => {
                return v.name == params.name;
              });
              let str = `
            <div style="width:168px;padding:25px 10px 10px 10px;">
              <div style="display: flex;line-height: 1;margin-left: 20px;align-items: center;justify-content: space-between;">
              <div style=" display: flex;align-items: center;color:#45FFAD;margin-bottom:5px;">
              <span style="width: 6px;height: 6px;border-radius: 50%;margin-right: 4px;background-color: #45FFAD;"></span> ${
                params.name
              }</div>
              </div>
              <div style="margin-left:30px;font-size:12px;"> 隐患点：${
                it ? it.value : 0
              }</div>
            </div>
            `;
              return str;
            },
          },
        },
        series: [
            {
                name: "数据分布",
                type: "map",
                geoIndex: 0,
                data: mapData,
            },
        ],
    };

    myChart.setOption(option);
    console.log(myChart.getOption())
    let oo=myChart.getOption()
    oo.series.push(
        {
            name: "预警数据",
            type: "pie",
            radius: "6%",
            center: myChart.convertToPixel("geo", [115.985006, 40.465325]),
            data: [
                { name: "蓝色预警", value: 10 },
                { name: "黄色预警", value: 20 },
                { name: "橙色预警", value: 30 },
                { name: "红色色预警", value: 40 }],
                label: {
                    show: false,
                },
        }
    )

    myChart.setOption(oo);
    // myChart.on('click', (e) => { console.log(e) })
</script>

</html>